<template>
    <!-- <el-upload action="#" list-type="picture-card" >
      <el-icon><Plus /></el-icon>
  
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span>
              <el-icon><zoom-in /></el-icon>
            </span>
            
           
          </span>
        </div>
      </template>
    </el-upload> -->
  
  
    <el-avatar :size="100" :src="imgUrl"  shape="square" @click="showImg">
        <img
          src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
        />
      </el-avatar>
    <!-- 抽屉 -->
    <!-- direction代表Drawer打开的方向 -->
    <el-drawer v-model="drawer" direction="rtl" size="50%">
  
      <el-upload v-model:file-list="fileList" :auto-upload="false" list-type="picture-card" :on-change="onChange">
        <el-icon>
          <Plus />
        </el-icon>
  
        <template #file="{ file }">
          <div  @click="getImg(file)">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span>
                <el-icon><Select /></el-icon>
              </span>
  
            </span>
          </div>
        </template>
  
      </el-upload>
  
    </el-drawer>
  </template>
  
  
  <script lang="ts" setup>
  import { onMounted, ref,watch } from 'vue'
  
  import { uploadApi } from '@/api'

  
  // 定义modelValue 的属性
  const props = defineProps({modelValue:{type:String,default:''}})
// 数据流向是单向的，从父到子
// 定义触发器 defineEmits  声明 可以从子到父，提前给父亲声明，等会要用到你的money
const emit = defineEmits(['update:modelValue'])

  // const imageUrl = ref("")
  const fileList = ref<any>([])
  
  
  // 这个变量drawer代表抽屉是开启还是关闭的
  const drawer = ref(false)
  const imgUrl = ref('')
  onMounted(() => {
    // console.log(props.modelValue);
    imgUrl.value = props.modelValue
    // console.log(imgUrl.value);
    
    getFileList()
  })
  
  watch(()=>props.modelValue,(newVal,oldVal)=>{
    // console.log(newVal);
    imgUrl.value = props.modelValue
    
  })
  // 页面刚进来的时候加载是正常的，成功之后就无需再次调用了-解决上传图片时会重新加载的问题
  const showImg = ()=>{
    drawer.value = true
  }
  
  const getImg = (file: any) => {
    // console.log(file.url);
    drawer.value = false
    imgUrl.value = file.url

    // props.modelValue = file.url  只读的
    emit('update:modelValue',file.url)
  }
  
  
  // uploadFiles的回调函数是两个参数，暂时用不到，所以为了防止爆红，前面加上_
  const onChange = (uploadFile: any, _uploadFiles: any) => {
    // console.log(uploadFile.raw);
    // .raw 就是真实的文件
  
    // uploadFile.raw 原生文件
    let file = uploadFile.raw
    let name = file.name
    // 用类去读取
    let reader = new FileReader()
    reader.readAsDataURL(file)
    // java的优势：天生支持多线程，当需要读文件时，让小弟去读取
  
    reader.onload = () => {
      // 小弟读完，会触发一个回调函数
      // console.log(reader.result); 
  
      upload(name, reader.result)
    }
  }
  
  const getFileList = () => {
    uploadApi.select.call().then(res => {
      // console.log(res);
      fileList.value = res
    })
  }
  const upload = (name: string, base64: any) => {
    uploadApi.upload.call({ name: name, base64: base64 })
      .then((res) => {
        // pop 删除数组的最后一个元素，返回删除的数组
        fileList.value.pop()
        fileList.value.push({name:name,url:res})
  
        // 重新呼叫一下接口
         getFileList()
        // 成功之后就无需再次调用了
        // console.log(res);
      })

  }
  </script>